<template>
	<el-card class="box-card">
		<el-row style="line-height: 60px;font-size: 18px;">
			<el-col :span="20">商户列表</el-col>
			<el-col :span="4" align="right"><el-button type="primary" @click="add">添加</el-button></el-col>
		</el-row>
		<el-tabs type="border-card" @tab-click="handleClick">
			<el-tab-pane label="待完善">
		  		<el-table :data="tableData" border stripe style="width: 100%;">
					<el-table-column prop="id" label="ID" width="80">
					</el-table-column>
					<el-table-column prop="customerName" label="商户名称">
						<template slot-scope="scope">
							<span @click="modify(scope.row)" style="cursor: pointer;color:#50bfff;">{{scope.row.customerName}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="updateTime" label="提交时间">
					</el-table-column>
					<el-table-column prop="customerAddress" label="地址">
					</el-table-column>
					<el-table-column prop="bdName" label="BD负责人">
					</el-table-column>
					<el-table-column label="操作" width="130">
						<template slot-scope="scope">
							<el-button size="small" type="warning" @click="modify(scope.row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="page" :small="true" @current-change="tab1CurrentChange" :current-page="tab1Page" :page-size="10" layout="prev, pager, next" :total="tab1Count">
				</el-pagination>
		  	</el-tab-pane>
		  	<el-tab-pane label="待审核">
		  		<el-table :data="tableData" border stripe style="width: 100%;">
					<el-table-column prop="id" label="ID" width="80">
					</el-table-column>
					<el-table-column prop="customerName" label="商户名称">
						<template slot-scope="scope">
							<span @click="modify(scope.row)" style="cursor: pointer;color:#50bfff;">{{scope.row.customerName}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="updateTime" label="提交时间">
					</el-table-column>
					<el-table-column prop="customerAddress" label="地址">
					</el-table-column>
					<el-table-column prop="bdName" label="BD负责人">
					</el-table-column>
					<el-table-column label="操作" width="130">
						<template slot-scope="scope">
							<el-button size="small" type="warning" @click="checkCustomer(scope.row.id)">审核</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="page" :small="true" @current-change="tab2CurrentChange" :current-page="tab2Page" :page-size="10" layout="prev, pager, next" :total="tab2Count">
				</el-pagination>
		  	</el-tab-pane>
		  	<el-tab-pane label="审核通过">
		  		<el-table :data="tableData" border stripe style="width: 100%;">
					<el-table-column prop="id" label="ID" width="80">
					</el-table-column>
					<el-table-column prop="customerName" label="商户名称">
						<template slot-scope="scope">
							<span @click="modify(scope.row)" style="cursor: pointer;color:#50bfff;">{{scope.row.customerName}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="updateTime" label="提交时间">
					</el-table-column>
					<el-table-column prop="customerAddress" label="地址">
					</el-table-column>
					<el-table-column prop="bdName" label="BD负责人">
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="toActivity(scope.row.id)">活动列表</el-button>
							<el-button size="small" type="success" @click="deleteSH(scope.$index,scope.row)">订单列表</el-button>
						</template>
					</el-table-column>
				</el-table>
		
				<el-pagination class="page" :small="true" @current-change="tab3CurrentChange" :current-page="tab3Page" :page-size="10" layout="prev, pager, next" :total="tab3Count">
				</el-pagination>
		  	</el-tab-pane>
		  	<el-tab-pane label="审核驳回">
		  		<el-table :data="tableData" border stripe style="width: 100%;">
					<el-table-column prop="id" label="ID" width="80">
					</el-table-column>
					<el-table-column prop="customerName" label="商户名称">
						<template slot-scope="scope">
							<span @click="modify(scope.row)" style="cursor: pointer;color:#50bfff;">{{scope.row.customerName}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="updateTime" label="提交时间">
					</el-table-column>
					<el-table-column prop="customerAddress" label="地址">
					</el-table-column>
					<el-table-column prop="bdName" label="BD负责人">
					</el-table-column>
					<el-table-column prop="bdName" label="最后一次驳回理由">
					</el-table-column>
				</el-table>
				
				<el-pagination class="page" :small="true" @current-change="tab4CurrentChange" :current-page="tab4Page" :page-size="10" layout="prev, pager, next" :total="tab4Count">
				</el-pagination>
		
		  	</el-tab-pane>
		</el-tabs>
		<el-dialog :visible.sync="dialogAdvise">
			<el-row :span="24">
				<el-col :span="24">
					<span>课程审核:</span>
				</el-col>
				<el-col :span="24" style="margin-top: 20px;">
					<el-input type="textarea" :rows="10" placeholder="请输入审核意见" v-model="advise.auditMemo">
					</el-input>
				</el-col>
				<el-col :span="24" style="margin-top: 20px;">
					<el-button type="primary" @click="submitAdvise('1')">通过</el-button>
					<el-button type="primary" @click="submitAdvise('0')">驳回</el-button>
					<el-button type="primary" style="float: right;" @click="dialogAdvise = false">取消</el-button>
				</el-col>
			</el-row>

		</el-dialog>
	</el-card>
</template>

<script>
	import {customerDelete, customerList,customerAudit} from '@/api/getData'
	export default {
		data() {
			return {
				dialogAdvise:false,
				findForm: {
					name: '',
					typeId: "4",
				},
				tableData: [],
				limit: 10,
				tab1Count:0,
				tab1Page: 1,
				tab2Count:0,
				tab2Page: 1,
				tab3Count:0,
				tab3Page: 1,
				tab4Count:0,
				tab4Page: 1,
				advise:{
					bzId:"",
					auditMemo:"",
					auditResult:"",
					bzType:"1",
				},
				
			};
		},
		created() {

			this.initData(0,this.tab1Page);
		},
		methods: {
			async initData(status,currentPage) {
				try {
					const returnData = await customerList({
						pageNum: currentPage,
						pageSize: this.limit.toString(),
						status:status,
					});
					if(returnData.code == "0") {
						this.tableData = returnData.list.rows;
						if(status == 0){
							this.tab1Count = Number(returnData.list.total);
						}else if(status == 1){
							this.tab2Count = Number(returnData.list.total);
						}else if(status == 2){
							this.tab3Count = Number(returnData.list.total);
						}else if(status == 3){
							this.tab4Count = Number(returnData.list.total);
						}
						
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			//0待完善 1待审核 2 审核通过 3审核不通过
			handleClick(tab, event) {
		        if(tab.$el.id == "pane-0"){
		        	this.initData(0,this.tab1Page);
		        }else if(tab.$el.id == "pane-1"){
		        	this.initData(1,this.tab2Page);
		        }else if(tab.$el.id == "pane-2"){
		        	this.initData(2,this.tab3Page);
		        }else if(tab.$el.id == "pane-3"){
		        	this.initData(3,this.tab4Page);
		        }
		   },
			tab1CurrentChange(val) {
				this.tab1Page = val;
				this.initData(0,this.tab1Page);
			},
			tab2CurrentChange(val) {
				this.tab2Page = val;
				this.initData(1,this.tab2Page);
			},
			tab3CurrentChange(val) {
				this.tab3Page = val;
				this.initData(2,this.tab3Page);
			},
			tab4CurrentChange(val) {
				this.tab4Page = val;
				this.initData(3,this.tab4Page);
			},
			async handleDeleteData(index, row) {
				try {
					let returnData = await customerDelete({
						id: row.id
					});
					if(returnData.code == "0") {
						this.tableData.splice(index, 1);
						this.$message({
							message: "删除成功！",
							type: 'success'
						});
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			deleteSH(index, row) {
				this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleDeleteData(index, row);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除操作'
					});
				});

			},
			add() {
				this.$router.push({
					path: 'businessOne'
				})
			},
			modify(row) {
				if(row.currentStep == 1){
					this.$router.push({
						path: 'businessTwo',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 2){
					this.$router.push({
						path: 'businessThree',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 3){
					this.$router.push({
						path: 'businessFour',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 4){
					this.$router.push({
						path: 'businessFive',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 5){
					this.$router.push({
						path: 'businessSix',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 6){
					this.$router.push({
						path: 'businessSeven',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 7){
					this.$router.push({
						path: 'businessEight',
						query: {
							id: row.id
						}
					})
				}else if(row.currentStep == 8){
					this.$router.push({
						path: 'businessOne',
						query: {
							id: row.id
						}
					})
				}
				
			},
			checkCustomer(id){
				this.advise.bzId = id;
				this.dialogAdvise = true;
			},
			async submitAdvise(type){
				try {
					this.advise.auditResult = type;
					let returnData = await customerAudit(this.advise);
					if(returnData.code == "0") {
						this.$message({
							message: "审核成功！",
							type: 'success'
						});
						this.dialogAdvise = false;
						this.initData(1,this.tab2Page);
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			toActivity(id){
				this.$router.push({
					path: 'activityList',
					query: {
						id: id
					}
				})
			}
		}
	}
</script>

<style scoped>
.box-card{
	margin: 0 10px;
}

.page{
    text-align: right;margin-top:10px;padding:0px;
}

</style>